iOS模態懸浮層(模式)
從螢幕下方彈出的模態元件稱為浮層,動畫給使用者的隱喻是從一個模式切換到另外一個(或新的)
/Untitled.png)
浮層的資訊隱喻作用
iOS13開始,目前已經變為預設通用控制元件。
/Untitled 1.png)
A 優點:使用者可看到少量背景中露出的內容,屬於有效的內容感知,這個設計用來提示使用者之前在做什麼
/Untitled 2.png)
B 浮層可以透過在螢幕上任意位置下滑來關閉。這種手勢的設計比點選關閉按鈕更容易操作
C 與滑動返回一樣,下拉關閉便於單手操作這在大螢幕裝置上尤為方便。當浮層中有可滑動的內容流時會與向下滑動的手勢互相沖突時。將內容滑動直到頂部就會觸發向下滑動浮層的手勢。
/Untitled 3.png)
也可以直接在浮層頂部(固定的關閉觸發區域)向下滑動將其關閉
/Untitled 4.png)
D 當出現以下情況時建議禁用該手勢:
浮層中帶有關鍵決策時(比如新增和儲存)應該被禁用。浮所以當你向下拉時會快速的回彈。如果使用者在離開浮層時必須做決策,可以彈出一個行動彈層,進行二次確認
E 浮層上的必要性操作:關閉按鈕仍舊是告知使用者可關閉的關鍵元素,原因是按鈕是易理解的且不是所有人都習慣和熟悉手勢操作。
當存在可滑動內容場景下,關閉按鈕是更方便的操作選擇,導航頂部加入儲存和取消按鈕也是同樣的原因
/Untitled 5.png)
/Untitled 6.png)
F 還有一些場景下不建議選擇浮層的互動方式。比如需要全屏(沉浸式)編輯圖片的場景(需要完整的空間和展示縮圖)
/Untitled 7.png)
構建切換模式的清晰感知
模態視窗(浮層)主要目的是為了改變使用者的互動模式。浮層是為了構建使用者從一個模式切換到另外的模式的清晰感知
/Untitled 8.png)
拿日曆應用舉例說明(瀏覽模式到決策模式)日曆有兩個模式:
1瀏覽模式(列表/表格)2決策模式(建立和編輯事項)
/Untitled 9.png)
瀏覽模式下列表頁(父級)和詳情頁(子級),子級透過標題延續繼承父級資訊,子級是父級事情的任務或工作流程
/Untitled 10.png)
當使用者對任務進行編輯或建立模式時,進入到了決策模式。浮層的設計準確向使用者傳達出當前已經進入到另外的(或新的)模式。
/Untitled 11.png)